<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>竹竿舞</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #demo-quickStart {
            width: 100%;
            height: 100vh;
        }

        .bamboo {
            transform: rotate(-80deg);
        }

        .mask-box {
            position: fixed;
            width: 100%;
            height: 100vh;
            z-index: 99;
            top: 0;
            left: 0;
            display: flex;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .wrap {
            display: flex;
            width: 50%;
            flex-direction: column;
            color: antiquewhite;
            justify-content: center;
        }

        .wrap p {
            margin-bottom: 30px;
            text-align: center;
        }

        .start {
            width: 37%;
        }

        button {
            padding: 10px;
        }

        .bg {
            width: 100%;
            position: absolute;
        }

        video {
            display: none;
        }

        .loading-box {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.7);
            z-index: 99;

        }

        .loading-box img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .score-box {
            position: fixed;
            top: 30px;
            left: 30px;
            display: flex;
            width: 100%;
            font-size: 16px;
        }

        .score-box div {
            min-width: 105px;
            padding: 2px 5px;
            border: 3px solid #fff;
            border-radius: 8px;
            margin-right: 20px;
            background: rgba(255, 255, 255, 0.3);
        }

        .score-box span {
            font-size: 22px;
            -webkit-text-fill-color: red;
            -webkit-text-stroke-color: white;
            -webkit-text-stroke-width: 1px;
            font-weight: bold;
        }
    </style>
    <!-- <div class="loading-box">
        <img src="./img/loading.gif" alt="">
    </div> -->
    <img src="http://qrwbtqqjh.hn-bkt.clouddn.com/game_bg.png" alt="" class="bg">
    <!-- <video src="./images/222.mp3" autoplay></video> -->
    <div id="demo-quickStart"></div>
    <div class="score-box">
        <div>得分：<span class="score">0</span></div>
        <div>倒计时：<span class="timer">60s</span>
        </div>
    </div>
    <div class="mask-box">
        <div class="wrap">
            <p>点击屏幕,人物跳跃</p>
        </div>
        <img src="./img/game1_6.png" alt="" class="start">
    </div>


    <script src="./js/sprite.js"></script>
    <script src="./js/jquery.js"></script>
    <script>
        // let gameNumber = Number(JSON.parse(localStorage.getItem('game3')).number)
        // if (gameNumber == 0) {
        //     $('.mask-box').hide()
        //     let loadingTimer = setTimeout(() => {
        //         $('.mask-box').show()
        //         $('.loading-box').hide()
        //         clearTimeout(loadingTimer)
        //         let obj = JSON.parse(localStorage.getItem('game3'))
        //         obj.number = 1
        //         gameNumber = 1
        //         localStorage.setItem('game3', JSON.stringify(obj))
        //     }, 5000)
        // } else {
        //     $('.loading-box').hide()
        // }
        const {
            Scene,
            Sprite,
            Label,
            Group
        } = spritejs;
        const scene = new Scene('#demo-quickStart', {
            viewport: ['auto', 'auto'],
            resolution: [750, 1200],
            useDocumentCSS: true,
        });
        const layer = scene.layer();
        const girlGroup = new Group()
        const shadowGroup = new Group()
        const bambooGroup = new Group()
        const girl1 = new Sprite('./img/girl1.png');
        const girl2 = new Sprite('./img/girl2.png');
        const girlPoint = new Sprite() //碰撞点
        const yinying1 = new Sprite('./img/yinying1.png')
        const yinying2 = new Sprite('./img/yinying2.png')
        const boy = new Sprite('./img/boys1.png') //默认 game13.png
        const bamboo1 = new Sprite() //虚拟竹子
        const bamboo2 = bamboo1.cloneNode() //虚拟竹子
        const bamboo3 = new Sprite('./img/bamboo.png')
        const bamboo4 = bamboo3.cloneNode()
        const label = new Label('得分:')
        const label2 = new Label('倒计时:')
        const times = new Label('60')
        const score = new Label('0')
        const arm1 = new Sprite()
        const arm2 = new Sprite()
        const arm3 = new Sprite()
        const arm4 = new Sprite()
        const boyArm1 = new Sprite('./img/arm_03.png')
        const boyArm2 = new Sprite('./img/arm1_03.png')
        const boyArm3 = new Sprite('./img/arm2_03.png')
        const boyArm4 = new Sprite('./img/arm3_03.png')

        let time = 3000, //竹竿动画初始时间
            num = 2, //跳跃次数
            animState = true, //人物跳跃动画状态是否结束
            state = 'forward', //需要跳的方向
            speed = 1, //竹竿初始速度
            bamAnim, //竹竿动画
            ficBamAnim1, //虚拟竹竿动画
            ficBamAnim2 //虚拟竹竿动画

        //全局图片初始位置
        ;
        (async function () {
            // 竹子中间距离
            await bamboo1.attr({
                rotate: '18deg',
                size: [380, 12],
                pos: [220, 745],
                // bgcolor: 'blue',
            })
            await bamboo2.attr({
                anchor: 0.3,
                rotate: '18deg',
                size: [490, 12],
                pos: [220, 765],
                // bgcolor: 'blue',
            })
            await bamboo3.attr({
                rotate: '18deg',
                size: [380, 12],
                pos: [220, 745],
            })

            await bamboo4.attr({
                anchor: 0.3,
                rotate: '18deg',
                size: [490, 12],
                pos: [220, 765],
            })

            await boy.attr({
                anchor: 0.5,
                pos: [380, 805],
                zIndex: 0
            })

            await label.attr({
                anchor: 0.5,
                fillColor: '#000',
                font: '24px "微软雅黑"',
                pos: [150, 100],
            })

            await label2.attr({
                anchor: 0.5,
                fillColor: '#000',
                font: '24px "微软雅黑"',
                pos: [300, 100],
            })

            await score.attr({
                anchor: 0.5,
                fillColor: '#000',
                font: '24px "微软雅黑"',
                pos: [200, 102],
            })

            await times.attr({
                anchor: 0.5,
                fillColor: '#000',
                font: '24px "微软雅黑"',
                pos: [380, 102],
            })

            // await arm1.attr({
            //     anchor: [0, 0.5],
            //     bgcolor: 'red',
            //     size: [100, 10],
            //     // size: [100, 10],
            //     // size: [100, 10],
            //     pos: [95, 670],
            //     transform: {
            //         rotate: '50deg'
            //         // rotate: '70deg'
            //         // rotate: '110deg'
            //     }
            // })
            await arm1.attr({
                anchor: [0, 0.5],
                // bgcolor: 'red',
                size: [100, 10],
                // size: [100, 10],
                // size: [100, 10],
                pos: [95, 670],
                transform: {
                    rotate: '50deg'
                    // rotate: '70deg'
                    // rotate: '110deg'
                }
            })
            await arm2.attr({
                anchor: [0, 0.5],
                // bgcolor: 'red',
                size: [90, 10],
                pos: [190, 670],
                transform: {
                    rotate: 60
                }
            })

            await arm3.attr({
                anchor: [0, 0.5],
                // bgcolor: 'red',
                size: [100, 10],
                pos: [590, 840],
                transform: {
                    rotate: -190
                }
            })
            await arm4.attr({
                anchor: [0, 0.5],
                // bgcolor: 'red',
                size: [50, 10],
                pos: [690, 820],
                transform: {
                    rotate: 70
                }
            })

            boyArm1.attr({
                anchor: [1.0, 0.2],
                pos: [105, 690],
                // bgcolor: 'yellow',
                transform: {
                    rotate: -75
                }
            })

            boyArm2.attr({
                // anchor: [0, 0.5],
                // bgcolor: 'yellow',
                pos: [190, 670],
                transform: {
                    rotate: 20
                    // rotate: 40
                },
                zIndex: -1
            })

            boyArm3.attr({
                anchor: [1, 0.2],
                // bgcolor: 'yellow',
                pos: [600, 875],
                transform: {
                    rotate: 40
                }
            })
            boyArm4.attr({
                // anchor: [0],
                // bgcolor: 'red',
                // size: [50, 10],
                pos: [670, 820],
                zIndex: -1
            })

            // await boyArm3.animate([{
            //     rotate: 20
            // }], {
            //     iterations: Infinity,
            //     duration: time / 2,
            //     direction: 'alternate',
            // })


            // armGroup1.append(arm1, boyArm1)
            // armGroup2.append(arm2, boyArm2)
            // armGroup3.append(arm3, boyArm3)
            // armGroup4.append(arm4, boyArm4)

            // layer.append(armGroup1,armGroup2,armGroup3,armGroup4,)
            layer.append(arm1, arm2, arm3, arm4, boyArm1, boyArm2, boyArm3, boyArm4)



            // 女孩图片组
            girlGroup.append(girl1, girl2, )

            // 阴影图片组
            shadowGroup.append(yinying1, yinying2, )

        })()

        // // 胳膊摆动
        // arm4.animate([{
        //         rotate: 70
        //     },
        //     {
        //         rotate: 90
        //     },
        //     {
        //         rotate: 70
        //     },
        // ], {
        //     iterations: Infinity,
        //     duration: time ,
        //     direction: 'alternate',
        // });

        // 女孩在最前时
        function girlFront() {
            girlGroup.attr({
                pos: [310, 390],
                zIndex: 9
            })

            girl1.attr({
                opacity: 1
            })

            girl2.attr({
                opacity: 0
            })

            shadowGroup.attr({
                pos: [330, 730]
            })

            yinying1.attr({
                opacity: 1
            })

            yinying2.attr({
                opacity: 0
            })
            girlPoint.attr({
                size: [20, 20],
                pos: [415, 750],
                // bgcolor: 'red',
                borderRadius: '100',
            })
        }

        // 竹竿动画
        function bambooAnimation() {
            bamAnim = boy.animate([{
                    textures: './img/6.png'
                },
                {
                    textures: './img/5.png'
                },
                {
                    textures: './img/4.png'
                },
                {
                    textures: './img/3.png'
                },
                {
                    textures: './img/2.png'
                },
                {
                    textures: './img/1.png'
                },
            ], {
                duration: time,
                iterations: Infinity,
                direction: 'alternate',
            })
        }

        // 虚拟竹子动画
        function fictitiousBambooAnimation() {
            const armAnim1 = arm1.animate([{
                    rotate: 50,
                },
                {
                    rotate: 100
                },
            ], {
                iterations: Infinity,
                duration: time / 2,
                direction: 'alternate',
            });
            boyArm1.animate([{
                rotate: -30
            }], {
                iterations: Infinity,
                duration: time / 2,
                direction: 'alternate',
            })
            boyArm2.animate([{
                rotate: 0
            }], {
                iterations: Infinity,
                duration: time / 2,
                direction: 'alternate',
            })
            boyArm3.animate([{
                rotate: 20
            }], {
                iterations: Infinity,
                duration: time / 2,
                direction: 'alternate',
            })
            boyArm4.animate([{
                rotate: 20
            }], {
                iterations: Infinity,
                duration: time / 2,
                direction: 'alternate',
            })
            const armAnim2 = arm2.animate([{
                    rotate: 60
                },
                {
                    rotate: 40
                },
                {
                    rotate: 60
                },
            ], {
                iterations: Infinity,
                duration: time,
                direction: 'alternate',
            });
            const armAnim3 = arm3.animate([{
                    rotate: -190
                },
                {
                    rotate: -220
                },
                {
                    rotate: -190
                },
            ], {
                iterations: Infinity,
                duration: time,
                direction: 'alternate',
            });
            arm4.animate([{
                    rotate: 70
                },
                {
                    rotate: 90
                },
                {
                    rotate: 70
                },
            ], {
                iterations: Infinity,
                duration: time,
                direction: 'alternate',
            });


            arm1.animate([{
                    size: [100, 10],
                },
                {
                    size: [90, 10]
                },
                {
                    size: [100, 10]
                },
            ], {
                iterations: Infinity,
                duration: time,
                direction: 'alternate',
            });
            ficBamAnim1 = bamboo1.animate([{
                    pos: [220, 745]
                }, {
                    pos: [220, 711],
                },
                {
                    pos: [220, 745],
                }
            ], {
                duration: time,
                iterations: Infinity,
                direction: 'alternate',
            })
            ficBamAnim3 = bamboo3.animate([{
                    pos: [220, 745]
                }, {
                    pos: [220, 711],
                },
                {
                    pos: [220, 745],
                }
            ], {
                duration: time,
                iterations: Infinity,
                direction: 'alternate',
            })
            ficBamAnim2 = bamboo2.animate([{
                    pos: [220, 765]
                },
                {
                    pos: [220, 810],
                }, {
                    pos: [220, 765]
                }
            ], {
                duration: time,
                iterations: Infinity,
                direction: 'alternate',
            })
            ficBamAnim4 = bamboo4.animate([{
                    pos: [220, 765]
                },
                {
                    pos: [220, 810],
                }, {
                    pos: [220, 765]
                }
            ], {
                duration: time,
                iterations: Infinity,
                direction: 'alternate',
            })

        }


        // 女孩跳跃和阴影动画
        function jumpAnimation() {
            layer.remove(girlPoint)
            const shadowAnim = yinying1.animate([{
                    textures: './img/yinying2.png'
                },
                {
                    textures: './img/yinying1.png'
                }
            ], {
                duration: 500,
            })
            const girlAmin = girl1.animate([{
                    textures: './img/girl2.png'
                },
                {
                    textures: './img/girl1.png'
                }
            ], {
                duration: 500,
            })
            girlAmin.finished.then(() => {
                animState = true
            })
        }

        // 女孩最前跳中间
        function jumpBack() {
            animState = false
            let pointTimer1 = setTimeout(() => {
                girlPoint.attr({
                    pos: [360, 805],
                })
                clearTimeout(pointTimer1)
            }, 300);
            jumpAnimation()
            layer.append(girlPoint)
            girlGroup.transition(0.5).attr({
                x: 260,
                y: 450
            })
            shadowGroup.transition(0.5).attr({
                x: 280,
                y: 780
            })
        }

        // 中间跳后面
        function jumpBack2() {
            animState = false
            let pointTimer2 = setTimeout(() => {
                girlPoint.attr({
                    pos: [415, 750],
                })
                clearTimeout(pointTimer2)
            }, 300);
            jumpAnimation()
            layer.append(girlPoint)
            girlGroup.transition(0.5).attr({
                x: 310,
                y: 390
            })
            shadowGroup.transition(0.5).attr({
                x: 330,
                y: 730
            })
        }

        // 最后跳中间
        function jumpForward() {
            animState = false
            let pointTimer3 = setTimeout(() => {
                girlPoint.attr({
                    pos: [370, 805],
                })
                clearTimeout(pointTimer3)
            }, 300);
            jumpAnimation()
            layer.append(girlPoint)
            girlGroup.transition(0.5).attr({
                x: 260,
                y: 450,
            })
            girlGroup.attr({
                zIndex: 9
            })
            shadowGroup.transition(0.5).attr({
                x: 280,
                y: 780
            })
        }

        // 中间跳前面
        function jumpForward2() {
            animState = false
            let pointTimer4 = setTimeout(() => {
                girlPoint.attr({
                    pos: [320, 830],
                })
                clearTimeout(pointTimer4)
            }, 300);
            jumpAnimation()
            layer.append(girlPoint)
            girlGroup.transition(0.5).attr({
                x: 200,
                y: 500,
            })
            girlGroup.attr({
                zIndex: 9
            })
            shadowGroup.transition(0.5).attr({
                x: 220,
                y: 830
            })
        }

        //  页面更新时检测物理碰撞
        function collision() {
            layer.on('update', (env) => {
                if (bamboo1.OBBCollision(girlPoint) || bamboo2.OBBCollision(girlPoint)) {
                    // 记得清除
                    let game = JSON.parse(localStorage.getItem(
                        `game${localStorage.getItem('progress')}`))
                    let gameScore = game.score | 0
                    let gameState = game.active
                    let gameLuck = game.luck
                    let obj = {
                        score: (score.attributes.text | 0) > gameScore ? score.attributes.text : gameScore,
                        active: gameState ? gameState : (score.attributes.text > 2),
                        luck: game.luck,
                        number: gameNumber
                    }
                    obj = JSON.stringify(obj)
                    localStorage.setItem(`game${localStorage.getItem('progress')}`, obj)
                    // -------------------------
                    clearInterval(pageTimer)
                    console.log('碰到了');
                    $('.wrap p').text(`游戏结束, 得分${score.attributes.text}`)
                    $('button').hide()
                    $('.mask-box').show()
                    layer.timeline.playbackRate = 0
                    setTimeout(() => {
                        location.href = `gameState.html?score=${score.attributes.text}`
                    }, 2000)
                    return
                }
            })
        }

        girlFront()

        layer.append(girlGroup, shadowGroup, boy, girlPoint, bamboo1, bamboo2, bamboo3, bamboo4)

        // 游戏操作
        layer.on('click', () => {
            console.log(num);
            if (!animState) {
                return
            } else {
                if (state == 'back') {
                    if (num == 1) {
                        jumpBack()
                        num++
                    } else {
                        state = "forward"
                        jumpBack2()
                    }
                } else {
                    if (num == 2) {
                        jumpForward()
                        num--
                    } else {
                        jumpForward2()
                        state = "back"
                    }
                }
                score.attributes.text = `${Number(score.attributes.text) + 1}`
                $('.score').text(`${Number(score.attributes.text)}`)
            }
        })

        // 页面倒计时
        let pageTimer, pTime = 60

        function timer() {
            pageTimer = setInterval(() => {
                pTime--
                times.attributes.text = `${pTime}`
                $('.timer').text(`${pTime}s`)
                if (pTime == 0) {
                    clearInterval(pageTimer)
                    $('.wrap p').text(`游戏结束, 得分${score.attributes.text}`)
                    $('button').hide()
                    $('.mask-box').show()
                    layer.timeline.playbackRate = 0
                    setTimeout(() => {
                        // location.href = `./gameState.html?score=${score.attributes.text}`
                    }, 2000)
                }
            }, 1000)
        }

        // 游戏开始
        $('.start').on('click', function () {
            $('.mask-box').hide()
            $(this).hide()
            gameOver = false
            score.attributes.text = 0
            // timer()
            fictitiousBambooAnimation()
            // bambooAnimation()
            // collision()
        })

        // 竹竿速度加快
        // let speedTimer = setInterval(() => {
        //     speed++
        //     if (bamAnim) {
        //         bamAnim.timeline.playbackRate += 0.2
        //     }
        //     if (ficBamAnim1) {
        //         ficBamAnim1.timeline.playbackRate += 0.2
        //     }
        //     if (ficBamAnim2) {
        //         ficBamAnim2.timeline.playbackRate += 0.2
        //     }
        //     if (speed == 10) {
        //         clearInterval(speedTimer)
        //     }
        // }, 2000);
    </script>
</body>

</html>